<template>
  <a-layout>
    <!-- 一级菜单 -->
    <a-layout-sider
      width="70px"
      class="windowLeftMenus"
    >
      <ul class="windowLeftMenusUl">
        <template v-for="(item,yjIndex) in firstMenus">
          <li
            v-if="item.meta.hasChildMenus"
            class="Imenu"
            :key="item.path"
            :class="{ 'Imenu-acitve': $route.fullPath.includes(item.path) || $route.name === item.name}"
          >
            <a class="Imenu-item" @click="routeJump(item,yjIndex)">
              <icon-font :type="item.meta.icon" style="font-size: 2.6rem; margin-bottom: 9px" v-if="item.meta.icon.indexOf('icon') === 0"/>
              <a-icon :type="item.meta.icon" style="font-size: 2.6rem; margin-bottom: 9px" v-else/>
<!--              <i-->
<!--                class="iconfont"-->
<!--                :class="item.meta.icon"-->
<!--                style="font-size: 2.6rem; margin-bottom: 9px"-->
<!--              ></i>-->
              <p>{{ $t(item.meta.title) }}</p>
            </a>
          </li>
        </template>
      </ul>
      <!-- 个人中心 -->
      <div class="accountBox">
        <div class="accountBoxInner">
          <a-dropdown :placement="'topCenter'">
            <i class="iconfont icon-wode" :class="{active:this.$route.name === 'mineIndex'}"></i>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="changeLang">
                  {{ this.$t('changeLang') }}
                </a>
              </a-menu-item>
<!--              <a-menu-item>
                <a @click="changeUserInfo('name')">
                  {{ this.$t('modifyName') }}
                </a>
              </a-menu-item>
              <a-menu-item>
                <a @click="changePassword">
                  {{ this.$t('modifyPassword') }}
                </a>
              </a-menu-item>
              <a-menu-item>
                <a @click="changeUserInfo('email')">
                  {{ this.$t('modifyEmail') }}
                </a>
              </a-menu-item>-->
              <a-menu-item>
                <a @click="changeUserInfo('remark')">
                  {{ this.$t('modifyRemarks') }}
                </a>
              </a-menu-item>
              <a-divider type="horizontal" />
              <a-menu-item>
                <a @click="showOwnRoles()">
                  {{ this.$t('linkedRole') }}
                </a>
              </a-menu-item>
              <a-divider type="horizontal" />
              <a-menu-item>
                <a @click="handleLogout">
                  <span>{{ $t('logOut') }}</span>
                </a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </div>
    </a-layout-sider>
    <!-- 二级菜单 -->
    <div :style="{ width: showSecondMenu ? '144px' : '0px' }" class="SecondMenu">
      <div v-if="showSecondMenu" style="height:100%;overflow:auto;">
        <div class="secondTitle">{{ $t(title) }}</div>
        <ul style="padding: 0">
          <template v-for="(citem, cindex) in secondMenu">
            <li
              v-if="citem.display && citem.meta.hasChildMenus"
              :key="cindex"
              @click="secondRouteJump(citem)"
              class="second-item"
              :class="{active:$route.fullPath.includes(citem.path)||$route.meta.active===citem.name }">
              <i
                class="iconfont"
                :class="citem.meta.icon"
                style=""
              ></i>
              <span
                class="titleText"
              >{{ $t(citem.meta.title) }}</span>
            </li>
          </template>
        </ul>
        <div
          class="shrink"
          @click.stop="
            () => {
              showSecondMenu = false
            }
          "
        >
          <a-icon type="left" />
        </div>
      </div>
    </div>
    <!-- 修改密码 -->
    <modify-password ref="modifyPassword"></modify-password>
    <!-- 修改用户(备注，邮箱，用户名) -->
    <edit-user-modal ref="editUserModal" v-bind="modalConfig.user.props"></edit-user-modal>
    <!-- 关联角色 -->
    <linked-role-list-modal ref="ownRoles"></linked-role-list-modal>
    <edit-lang-modal ref="editLang"></edit-lang-modal>
  </a-layout>
</template>
<script>
import { mapActions } from 'vuex'
import modifyPassword from '@/components/SelfModal/ModifyPassword'
import EditUserModal from '@/views/system/user/components/EditUserModal.vue'
import LinkedRoleListModal from '@/views/system/user/components/LinkedRoleListModal.vue'
import EditLangModal from '@/views/system/user/components/EditLangModal.vue'
import {ACCESS_TOKEN} from "@/store/mutationTypes";
import { Icon } from 'ant-design-vue';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3954971_i1qizfurwv.js',
});
export default {
  name: 'SMenu',
  components: {
    IconFont,
    modifyPassword,
    EditUserModal,
    LinkedRoleListModal,
    EditLangModal
  },
  props: {
    menu: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      openKeys: [],
      selectedKeys: [],
      cachedOpenKeys: [],
      secondMenu: [],
      title: '',
      showSecondMenu: false,
      // 上一个当前一级菜单的下标
      prevActiveYjIndex: -1,
      modalConfig: {
        user: {
          // 需要绑定的属性
          props: {
            field: ''
          }
        }
      }
    }
  },
  computed: {
    firstMenus () {
      const data = this.menu.map(item => {
        return {
          ...item,
          hasChild: Boolean(item.children && item.children.length)
        }
      })
      return data
    }
  },
  watch: {
    showSecondMenu: {
      handler (val) {
        console.log(val, 'showSecondMenu')
        this.$emit('showejmenu', val)
      },
      immediate: true
    }
  },
  created () {
  },
  methods: {
    ...mapActions(['Logout']),
    onSelect (obj) {
      this.selectedKeys = obj.selectedKeys
      this.$emit('select', obj)
    },
    // 菜单跳转
    routeJump (menu, menuIndex) {
      if (this.prevActiveYjIndex === menuIndex && menu.hasChild) {
        this.showSecondMenu = !this.showSecondMenu
        return
      }
      if (menu.hasChild) {
        this.showSecondMenu = true
        this.secondMenu = menu.children
        this.title = menu.meta.title
      } else {
        this.showSecondMenu = false
      }
      this.prevActiveYjIndex = menuIndex
      if (menu.name === 'statistics') {
        this.$router.push('/statistics/outline?dir=1')
        return
      }
      console.log(menu, menuIndex, 'menuIndex2')
      this.$router.push({ name: menu.name })
    },
    // 二级菜单跳转
    secondRouteJump (menu) {
      this.$router.push({ name: menu.name })
    },
    // 退出登录
    handleLogout () {
      const that = this
      this.$confirm({
        title: that.$t('tip'),
        content: that.$t('logOutComfirm'),
        onOk () {
          return that.Logout().then(() => {
            if (process.env.NODE_ENV === 'development'){
              location.href = location.origin + '#/user/login?redirect=' + that.$route.fullPath
            }else {
              sessionStorage.clear();
              //TODO 配置化
              location.href = process.env.VUE_APP_SSO_BASE_URL+"/idp/authCenter/GLO?redirectToLogin=true&redirectToUrl="+process.env.VUE_APP_HOME_BASE_URL
            }
          })
        },
        onCancel () { }
      })
    },
    // 修改密码弹框
    changePassword () {
      this.$refs.modifyPassword.switchVisible(true)
    },
    // 修改用户(名称，邮箱，备注)弹框
    changeUserInfo (key) {
      this.modalConfig.user.props.field = key
      this.$nextTick(() => {
        this.$refs.editUserModal.switchVisible(true)
      })
    },
    // 查看用户关联的角色弹框
    showOwnRoles () {
      this.$refs.ownRoles.switchVisible(true)
    },
    // 查看用户关联的角色弹框
    changeLang () {
      this.$refs.editLang.switchVisible(true)
    }
  }
}
</script>
<style lang="less" scoped>
.Imenu {
  height: 97px;
  display: flex;
  .Imenu-item {
    margin: auto;
    display: block;
    text-align: center;
    color: #333;
    &:hover {
      color: @primary-color;
    }
    p {
      margin-bottom: 0;
    }
  }
}
.Imenu-acitve {
  background-color: @primary-color;
  .Imenu-item {
    color: #fff !important;
  }
}
.SecondMenu {
  word-break: keep-all;
  background: #fff;
  height: 100%;
  transition: 0.5s;
  border-right: 1px solid @borderColor;
  position: relative;
  .secondTitle {
    font-size: 1.8rem;
    color: #5e5e5e;
    font-weight: bolder;
    margin-bottom: 8px;
    padding: 24px 0 0 24px;
  }
  .second-item {
    cursor: pointer;
    list-style: none;
    height: 48px;
    line-height: 48px;
    padding-left: 24px;
    position: relative;
    color:#333;
    &.active {
      color: @primary-color;
    }
    &:hover {
      background: rgba(242, 242, 242, 0.5);
      color: @primary-color;
    }
    .titleText {
      display: block;
      padding-left: 26px;
      overflow: hidden;
      white-space: nowrap;
    }
    .iconfont {
      font-size: 1.8rem;
      position: absolute;
      left: 24px;
    }
  }
  .shrink {
    width: 12px;
    height: 56px;
    line-height: 56px;
    border-radius: 0 28px 28px 0;
    text-align: center;
    color: #ffff;
    font-size: 1.2rem;
    background: #4388a6;
    cursor: pointer;
    position: absolute;
    right: -12px;
    bottom: 50%;
    z-index: 2000;
    display: none;
  }
  &:hover .shrink {
    display: block;
  }
}

</style>
<style lang="less">
.windowLeftMenus {
  .ant-layout-sider-children {
    display: flex;
    flex-direction: column;
  }
  .windowLeftMenusUl {
    flex: 1 0 0;
    margin: 0;
    padding: 0;
    overflow: auto;
  }
  .accountBox {
    height: 70px;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .accountBoxInner {
    width: 58px;
    margin:0 auto;
    border-top:1px solid #ddd;
    padding-top: 5px;
    text-align: center;
    >i {
      font-size: 28px;
      cursor: pointer;
      &:hover,&.active {
        color: @primary-color;
      }
    }
  }
}
</style>
